<template>
  <view class="my-page">
    <!-- 头部：头像 + 用户名 -->
    <view class="header">
      <image class="avatar" src="/static/my/avatar.png"></image>
      <view class="user-info">
        <text class="username">未登录</text>
      </view>
    </view>

    <!-- 功能区：信用值（100）、积分、收藏 -->
    <view class="feature-group">
      <view class="feature-item" v-for="(item, index) in features" :key="index">
        <image :src="item.icon"></image>
        <text>{{ item.text }}</text>
        <text v-if="item.text === '信用值'" class="feature-value">100</text>
      </view>
    </view>

    <!-- 交易区：仅保留图标，删除所有文本 -->
    <view class="section-title">我的交易</view>
    <view class="trade-group">
      <view class="trade-item" v-for="(item, index) in trades" :key="index">
        <image :src="item.icon"></image>
        <!-- 删除文本显示 -->
      </view>
    </view>

    <!-- 服务区：地址管理、帮助中心、在线客服、问题反馈 -->
    <view class="section-title">我的服务</view>
    <view class="service-group">
      <view class="service-item" v-for="(item, index) in services" :key="index">
        <image :src="item.icon"></image>
        <text>{{ item.text }}</text>
      </view>
    </view>

    <!-- 底部品牌 -->
    <view class="brand">JINPAITAO</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      features: [
        { icon: "/static/my/credit.png", text: "信用值" },
        { icon: "/static/my/score.png", text: "积分" },
        { icon: "/static/my/collect.png", text: "收藏" }
      ],
      trades: [
        // 交易区：仅保留图标，无需文本
        { icon: "/static/my/buy.png" },
        { icon: "/static/my/sell.png" },
        { icon: "/static/my/bid.png" }
      ],
      services: [
        { icon: "/static/my/address.png", text: "地址管理" },
        { icon: "/static/my/help.png", text: "帮助中心" },
        { icon: "/static/my/service.png", text: "在线客服" },
        { icon: "/static/my/feedback.png", text: "问题反馈" }
      ]
    };
  }
};
</script>

<style scoped>
.my-page {
  background-color: #f8f3ed;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #5c3c1c;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}
.user-info {
  color: #fff;
}
.username {
  font-size: 16px;
  font-weight: bold;
}

.feature-group, .trade-group, .service-group {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  background-color: #fff;
  margin: 10px 0;
}
.feature-item, .trade-item, .service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-item image, .trade-item image, .service-item image {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.feature-item text, .service-item text {
  font-size: 12px;
  color: #666;
}

/* 信用值数字样式 */
.feature-value {
  font-size: 12px;
  color: #ff3333;
  margin-top: 2px;
}

.section-title {
  padding: 15px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.brand {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 12px;
}
</style>